<template>
    <div class="app-container">
      <el-form   @submit.native.prevent  :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="课程名称" prop="courseName">
          <el-input
          v-input-restrict v-model="queryParams.courseName" placeholder="请输入课程名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="主讲老师" prop="principalId">
          <el-select filterable v-model="queryParams.principalId" placeholder="请选择" clearable>
            <el-option v-for="item in teachers" :key="item.teacherId" :label="item.name" :value="item.teacherId" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建者" prop="createBy">
          <el-select filterable v-model="queryParams.createBy" placeholder="请选择" clearable>
            <el-option v-for="item in teachers" :key="item.teacherId" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button v-preventReClick type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-preventReClick type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
            @click="handleUpdate">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-preventReClick type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
            @click="handleDelete">删除</el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <!-- // 0.启用 1.禁用 2.待提交 3.待审核 4.已驳回 5.已到期 -->
      <div class="commonMenu">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="2">待提交</el-menu-item>
          <el-menu-item index="3">待审核</el-menu-item>
          <el-menu-item index="4">已驳回</el-menu-item>
          <el-menu-item index="0">已审核</el-menu-item>
        </el-menu>
      </div>

      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="课程编号" align="center" prop="courseNum" />

        <el-table-column label="课程名称" align="center" prop="courseName" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <!-- // 0.启用 1.禁用 2.待提交 3.待审核 4.已驳回 5.已到期 -->
            <el-tag type="success" v-if="scope.row.status == 0">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 1">禁用</el-tag>
            <el-tag v-if="scope.row.status == 2">待提交</el-tag>
            <el-tag type="warning" v-if="scope.row.status == 3">待审核</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 4">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="`${$hourAmount?$hourAmount:'课时量'}(时)`" align="center" prop="studyTime" />
        <el-table-column label="主讲老师" align="center" prop="teacherIds" />
        <el-table-column label="创建人" align="center" prop="principalId" />
        <el-table-column label="创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后操作时间" sortable align="center" prop="updateTime"><template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价" align="center" prop="levelName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <!-- // 0.启用 1.禁用 2.待提交 3.待审核 4.已驳回 5.已到期 -->
          <template slot-scope="scope">
            <el-button v-preventReClick v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 3" size="mini"
              type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, 'detail')">详情</el-button>
            <el-button v-preventReClick v-if="scope.row.status !== 3" size="mini" type="text" icon="el-icon-edit"
              @click="handleUpdate(scope.row, 'edit')">编辑</el-button>
            <el-button v-preventReClick
              v-if="(scope.row.status == 2 && scope.row.courseId) || scope.row.status == 4"
              size="mini" type="text" icon="el-icon-edit" @click="handleCancelUpdate(scope.row)">撤销编辑</el-button>
            <el-button v-preventReClick v-if="scope.row.status == 2" size="mini" type="text" icon="el-icon-thumb"
              @click="handleSubmitAudit(scope.row)">提交审核</el-button>
            <!-- v-if="scope.row.status == 3" -->
            <el-button v-preventReClick v-if="scope.row.status == 3" size="mini" type="text" icon="el-icon-thumb"
              @click="handleUpdate(scope.row, 'audit')">审核</el-button>
            <el-button v-preventReClick size="mini" type="text" icon="el-icon-view">预览</el-button>
            <!-- <el-button v-preventReClick size="mini" type="text" icon="el-icon-paperclip" v-clipboard:copy="JSON.stringify(scope.row)"
              v-clipboard:success="clipboardSuccess">复制</el-button> -->
            <el-button v-preventReClick size="mini" type="text" icon="el-icon-paperclip" @click="handleCopy(scope.row)">复制</el-button>

            <el-button v-preventReClick v-if="scope.row.status == 0 || scope.row.status == 1" size="mini" type="text" icon="el-icon-open"
              @click="handleSwitch(scope.row)">{{ scope.row.status == 0 ? "停用" : "启用" }}</el-button>
            <el-button v-preventReClick v-if="scope.row.status == 1 || scope.row.status == 2" size="mini" type="text" icon="el-icon-delete"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </template>

  <script>
  import {
    listPost_course, listCourseTemporary, editCourseTemporary, revokeCourseTemporary,
    getPost_course,
    delPost_course,
    addPost_course,
    updatePost_course,
  } from "@/api/course/course";
  import { listPost_teacher } from "@/api/schoolOrganization/teacher";
  export default {
    name: "Post",
    dicts: ["sys_normal_disable"],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 岗位表格数据
        postList: [],
        // level
        level: [],
        // 查询参数
        activeIndex: "2",
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          createBy: undefined,
          principalId: undefined,
          courseName: undefined,
          status: 2,
          schoolId: undefined,
        },
        //   教师列表
        teachers: [],
      };
    },
    created() {
      this.getList();
      this.getTeacher();
    },
    methods: {
      /* 复制 */
      handleCopy(row) { },
      /* 撤销编辑 */
      handleCancelUpdate(row) {
        this.$confirm(`确定撤销编辑吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            revokeCourseTemporary(row.id).then((response) => {
              this.$modal.msgSuccess("操作成功");
              this.getList();
            });
          })
          .catch(() => { });
      },
      /* 提交审核 */
      handleSubmitAudit(row) {
        this.$confirm(`确定提交审核吗?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let data = JSON.parse(JSON.stringify(row));
            data.status = 3
            editCourseTemporary(data).then((response) => {
              this.$modal.msgSuccess("操作成功");
              this.getList();
            });
          })
          .catch(() => { });
      },
      // 获取教师列表 teacherId name
      getTeacher() {
        listPost_teacher({
          pageNum: 1,
          pageSize: 9999,
          schoolId: this.$store.getters.schoolId,
        }).then((response) => {
          this.teachers = response.rows;
        });
      },
      // 状态选择 查询列表
      handleSelect(key, keyPath) {
        this.queryParams.status = key;

        this.getList()
      },
      // 审核按钮
      handleAudit(row) { },
      // 停用 启用按钮
      handleSwitch(row) {
        this.$confirm(`确定${row.status == 0 ? "停用" : "启用"}?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let data = JSON.parse(JSON.stringify(row));
            data.status = row.status == 0 ? 1 : 0;
            updatePost_course(data).then((response) => {
              this.$modal.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
          })
          .catch(() => { });
      },
      /* 查询课程列表 */
      getList() {
        this.loading = true;
        this.queryParams.schoolId = this.$store.getters.schoolId;
        if (this.queryParams.status == 1) {
          listPost_course(this.queryParams).then((response) => {
            this.postList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        } else {
          listCourseTemporary(this.queryParams).then((response) => {
            this.postList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }

      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id ? item.id : item.courseId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/course/addCourse",
          query: {
            type: "add",
          },
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row, type) {
          this.$router.push({
            path: "/course/addCourse",
            query: {
              courseTemporaryId: row.id,
              type: type,
            },
          });
      },
      /* 复制 */
      clipboardSuccess() {
        this.$modal.msgSuccess("复制成功");
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id ? row.id : row.courseId || this.ids;
        this.$modal
          .confirm("确定删除？")
          .then(function () {
            return delPost_course(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => { });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "system/post/export",
          {
            ...this.queryParams,
          },
          `post_${new Date().getTime()}.xlsx`
        );
      },
    },
  };
  </script>
